<template>
  <el-select
    v-model="selectedValue"
    filterable
    @input="handleInput"
    @change="handleChange"
  >
    <el-option
      v-for="option in options"
      :key="option.value"
      :label="option.label"
      :value="option.value"
    ></el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      selectedValue: this.value
    };
  },
  methods: {
    handleInput (value) {
      console.log('value :>> ', value);
      this.selectedValue = value;
      this.$emit('input', value);
    },
    handleChange (value) {
      this.selectedValue = value;
      this.$emit('change', value);
    }
  }
};
</script>
